<template>
  <div>
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <!-- loading 加载中  finished 加载完成 finished-text加载完成后的文本-->
    <!-- 滚动到底部触发load时间 设置loading的值(blooean) -->
    <!-- list组件 -->
    <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    :immediate-check ="false">
    <article-item v-for="obj in ArticleList" :key="obj.art_id" :obj="obj" @click.native="$router.push(`/article_detail?art_id=${obj.art_id}`)"> </article-item>
    </van-list>
  </van-pull-refresh>

  </div>
</template>

<script>
import ArticleItem from '@/components/ArticleItem.vue'
import { getArticleListAPI } from '@/api'
export default {
  props: {
    cid: Number
  },
  name: 'ArticleList',
  components: {
    ArticleItem
  },
  data () {
    return {
      ArticleList: [], // 文章列表
      loading: false,
      finished: false,
      nextTime: new Date().getTime(), //
      refreshing: false
    }
  },
  created () {
    this.getArticleListFn()
  },
  methods: {
    // 获取文章列表id
    async getArticleListFn () {
      const res = await getArticleListAPI({
        channel_id: this.cid, // 父传子传过来的频道id
        timestamp: this.nextTime // 当前时间戳就是最后一篇的时间戳 把字符串传承时间戳
      })
      // console.log(res)
      // this.ArticleList = res.data.data.results
      this.ArticleList = [...this.ArticleList, ...res.data.data.results] // 上一次请求的数据和下一次请求的拼接在一起
      this.nextTime = res.data.data.pre_timestamp // 拿到最后一条数据的时间戳
      this.loading = false // 没有数据了就把加载中设置为false finished设置为true
      this.refreshing = false // 刷新的事件
      this.finished = false
      if (res.data.data.pre_timestamp === null) {
        this.finished = true
      }
    },
    // 加载更多
    onLoad () {
      // 异步更新数据
      if (this.ArticleList.length > 0) {
        this.getArticleListFn() // 文章列表有值的时候才去加载
      }
      // 拿到最后一篇文章的时间戳 请求数据 更改加载状态 请求完毕 更改状态为true
      // key重复是因为created请求一次 onload上来一请求一次 用组件自带的属性immediate-check
      // immediate-check 是否在初始化时立即执行滚动位置检查 默认是true
    },
    // 下拉刷新
    onRefresh () {
      // 直接请求接口会获得之前所有请求到的数据加这次请求到的10条新数据 所有要清空之前的数据再请求接口
      this.ArticleList = []
      this.nextTime = new Date().getTime()
      this.getArticleListFn()
    }
  }
}
</script>
